<template>
  <div>
    <div class="item" v-for="item in goods" :key="item.id">
      <router-link :to="`/detail/${item.id}`">
        <div class="left">
          <!-- 点击图片显示预览图 -->
          <!-- 修饰符避免向上冒泡stoPagation和默认行为preventDefault -->
          <!-- img有图片预览的行为，点击展开大图预览，就要对上级的a标签 默认跳转行为进行取消 -->
          <!-- 最后避免向上冒泡，使得a标签监听不到事件，不会去响应跳转 -->
          <img :src="item.img" alt @click.stop.prevent="imgPreview(item.img)">
        </div>
        <div class="right">
          <div class="title">{{item.title}}</div>
          <div class="info">
            <i class="cubeic-add iii" @click.stop.prevent="addCart($event,item)"></i>
            <span>{{item.count}}人购买</span>
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  props: ["goods"],
  methods: {
    addCart($event,item){//传递的参数，当前加购物的项
      //加购物车
      //页面之间的数据共享，在这里加数据，将来到购物车页面去访问
      //提交vuex里的store存起来
      this.$store.commit('addCart',item);

      // 把点击事件派发出去，父类去获取获取小球动画起始位置
      //$event 是原生事件
      this.$emit('addCart',$event.target)
    },
    imgPreview(img) {//当前图片
      //图片预览
      //调用cube-ui的全局API，动态添加图片预览组件
      this.$createImagePreview({
        //全局创建了组件，记得要去调用，show()一下
        imgs: [img]
      }).show()
    },
    
  },
};
</script>

<style lang="scss" scoped>
.cube-image-preview {
  .cube-slide {
    
  }
}
.item {
  padding: 10px;
  overflow: hidden;

  .left {
    width: 100px;
    float: left;

    img {
      width: 100%;
    }
  }

  .right {
    margin-left: 120px;
    text-align: left;

    .title {
      line-height: 30px;
    }

    .cubeic-add {
      font-size: 22px;
    }
  }
}
</style>